<template>
	<view class="list-container">
		<view id="wf-list" class="list" v-for="(list,listIndex) of viewList" :key="listIndex">
			<view class="item" v-for="(item,index) of list.list" :key="index" @click="toArticle(item.id)">
				<image @load="handleViewRender(listIndex,index)" @error="handleViewRender(listIndex,index)"
					:src="item.cover_img" mode="widthFix"></image>
				<view class="desc">{{item.title}}</view>
				<view class="user">
					<view class="user-header-image">
						<image :src="item.user_img"></image>
					</view>
					<view class="user-name">
						<view class="name">{{item.user_name}}</view>
						<view class="time">{{item.time|getTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		props: {
			list: {
				type: Array, //实际请求获取的列表数据
			}
		},
		data() {
			return {
				viewList: [{
					list: []
				}, {
					list: []
				}], //展示到视图的列表数据
				everyNum: 2
			}
		},
		filters: {
			getTime(time) {
				return moment(time * 1000).format('YYYY-M-DD');
			}
		},
		methods: {
			toArticle(id) {
				uni.navigateTo({
					url: "/pages/article/article?id="+id,
					fail: (err) => {
						console.log(err) //打印错误信息
					}
				})
				
				// console.log(id);
				
				// this.request('/index/getarticle/'+id).then(res => {
				// 	console.log(res);
				// })
			},
			init() {
				this.viewList = [{
					list: []
				}, {
					list: []
				}];
				setTimeout(() => {
					this.handleViewRender(0, 0)
				}, 0)
			},
			handleViewRender(x, y) {
				// console.log(x,y);
				// const num = (x+1)*(y+1);
				// console.log(num%(this.everyNum));
				// console.log(num);
				// if((num%(this.everyNum))!==0&&num!==1)return;
				// console.log(num,'----');
				const index = this.viewList.reduce((total, current) => total + current.list.length, 0)
				if (index > this.list.length - 1) {
					// 加载完成触发事件并返回加载过的图片数
					this.$emit('finishLoad', index)
					return
				};
				const query = uni.createSelectorQuery().in(this);
				let listFlag = 0;
				query.selectAll('#wf-list').boundingClientRect(data => {
					listFlag = data[0].bottom - data[1].bottom <= 0 ? 0 : 1;
					this.viewList[listFlag].list.push(this.list[index])
					// this.list.slice(index,index+this.everyNum).forEach((item,index)=>{
					//     const flag = listFlag===0?index&1:Number(!(index&1))
					//     this.viewList[flag].list.push(item)
					// })
				}).exec()
			},
		},
		mounted() {
			if (this.list.length) {
				this.init()
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-container {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 24rpx;
		padding-top: 20rpx;
		background-color: #edebee;

		.list {
			width: calc(50% - 10rpx);
			display: flex;
			flex-direction: column;

			.item {
				background-color: #fff;
				margin-bottom: 20rpx;
				border-radius: 18rpx;

				image {
					width: 100%;
					border-radius: 18rpx 18rpx 0 0;
				}

				.desc {
					margin: 16rpx;
					font-size: 28rpx;
					height: 78rpx;
					/* 多行文本溢出隐藏 */
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
				.user {
					position: relative;
					display: flex;
					height: 60rpx;
					padding: 0 16rpx 16rpx;
					.user-header-image {
						width: 60rpx;
						height: 60rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.user-name {
						height: 60rpx;
						margin-left: 10px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						color: #333;
						.name {
							font-size: 24rpx;
							width: 200rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.time {
							font-size: 20rpx;
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
